<template>
	<view class="view-contain">
		<!-- 公共组件-每个页面必须引入 -->
		<public-module leftIcon="arrow-left" :title="title" />
		<u-tabs lineColor="#409EFF" lineWidth="120rpx" :list="[{ name: '我的军令状' }]" />
		<view class="form-contain">
			<u-form :rules="rules" labelPosition="left" :model="formInfo" labelWidth="auto" ref="addForm">
				<u-form-item label="专业" prop="userMajor" borderBottom>
					<u-input v-model="formInfo.userMajor" placeholder="请输入用户专业" />
				</u-form-item>
				<u-form-item label="城市" prop="preparationCity" borderBottom>
					<u-input v-model="formInfo.preparationCity" placeholder="请输入备考城市" />
				</u-form-item>
				<u-form-item label="行测" prop="xingceTarget" borderBottom>
					<u-input v-model="formInfo.xingceTarget" placeholder="请输入行测目标分数" />
				</u-form-item>
				<u-form-item label="申论" prop="shenlunTarget" borderBottom>
					<u-input v-model="formInfo.shenlunTarget" placeholder="请输入申论目标分数" />
				</u-form-item>
				<u-form-item label="总分" prop="totalScoreTarget" borderBottom>
					<u-input v-model="formInfo.totalScoreTarget" placeholder="请输入总分目标" />
				</u-form-item>
				<u-form-item label="刷题量" prop="currentPracticeCount" borderBottom>
					<u-input v-model="formInfo.currentPracticeCount" placeholder="请输入当前刷题量" />
				</u-form-item>
				<u-form-item label="学习计划" prop="studyPlan" borderBottom>
					<u-textarea v-model="formInfo.studyPlan" placeholder="请输入学习计划" />
				</u-form-item>
			</u-form>
		</view>
		<view class="bottom-btn-contain">
			<view style="width: 100%;">
				<u-button  type="primary" shape="circle" @click="toAdd">保存</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import {
		addMilitaryOrder
	} from "@/config/api.js"

	export const addFormRules = {
		'userMajor': {
			required: true,
			message: '请输入专业',
			trigger: ['blur', 'change']
		},
		'preparationCity': {
			required: true,
			message: '请输入备考城市',
			trigger: ['blur', 'change']
		},
		'xingceTarget': {
			required: true,
			message: '请输入行测目标',
			trigger: ['blur', 'change']
		},
		'currentPracticeCount': {
			required: true,
			message: '请输入当前刷题量',
			trigger: ['blur', 'change']
		},
		'studyPlan': {
			required: true,
			message: '请输入学习计划',
			trigger: ['blur', 'change']
		}
	}

	export default {
		data() {
			return {
				rules: addFormRules,
				// 1新增，2编辑，3详情
				type: 1,
				formInfo: {
					userMajor: null,
					preparationCity: null,
					xingceTarget: null,
					shenlunTarget: null,
					totalScoreTarget: null,
					currentPracticeCount: null,
					studyPlan: null,
				},
				title: '我的军令状' // 新增 title 属性
			}
		},
		computed: {},
		onLoad(option) {
			if (option.data) {
				const data = JSON.parse(option.data)
				this.formInfo = data
			}
		},
		onShow() {},
		methods: {
			confirm(e) {},
			toAdd() {
				this.$refs.addForm.validate().then(async () => {
					const res = await addMilitaryOrder({
						...this.formInfo
					})
					if (res.code === 200) {
						uni.$u.toast('保存成功')
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 500)
					} else {
						uni.$u.toast(res.msg || '保存失败')
					}
				}).catch(errors => {
					uni.$u.toast('校验失败')
				})
			}
		},
		onReady() {
			// onReady 为uni-app支持的生命周期之一
			this.$refs.addForm.setRules(this.rules)
		}
	}
</script>

<style lang="scss" scoped>
	.view-contain {
		position: relative;
		height: 100vh;
		overflow-y: auto;

		/deep/ .u-checkbox-group {
			flex-wrap: wrap;
		}

		.form-contain {
			background-color: #fff;
			border-radius: 32rpx;
			margin: 12rpx 24rpx;
			padding: 24rpx;

			.title {
				font-weight: bold;
				margin-bottom: 16rpx;
			}

			&.bottom-contain {
				margin-bottom: 200rpx;
			}
		}

		.bottom-btn-contain {
			position: fixed;
			left: 0;
			bottom: 0;
			z-index: 99;
			width: calc(100vw - 48rpx);
			height: 150rpx;
			background-color: #fff;
			padding: 48rpx 24rpx 0;
		}
	}
</style>